import React from 'react';
import { useParams } from 'react-router-dom';
import { Card, Tag, Avatar, Button, Divider, Space } from 'antd';
import { LikeOutlined, StarOutlined, MessageOutlined, ShareAltOutlined, WarningOutlined } from '@ant-design/icons';
// 假设有热榜数据
const hotList = {
  tech: [
    {
      title: '大模型推理加速新突破',
      author: 'AI前沿',
      time: '2024-06-01',
      tags: ['技术前沿'],
      summary: '新一代推理引擎大幅提升大模型推理速度...',
      content: `AI推理引擎持续创新，助力大模型在实际场景高效落地。`,
      image: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80'
    }
  ],
  app: [
    {
      title: 'AI助力金融风控升级',
      author: '行业应用',
      time: '2024-05-30',
      tags: ['行业应用'],
      summary: 'AI在金融风控、信贷审批等领域表现突出...',
      content: `AI风控模型提升了金融行业的风险识别能力。`,
      image: 'https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=800&q=80'
    }
  ],
  policy: [
    {
      title: 'AI伦理治理新进展',
      author: '政策伦理',
      time: '2024-05-28',
      tags: ['政策伦理'],
      summary: '多国出台AI伦理治理新规...',
      content: `AI伦理治理成为全球关注焦点，政策持续完善。`,
      image: 'https://images.unsplash.com/photo-1465101178521-c1a9136a3fd9?auto=format&fit=crop&w=800&q=80'
    }
  ],
  tool: [
    {
      title: 'AI开发工具集锦',
      author: '工具资源',
      time: '2024-05-25',
      tags: ['工具资源'],
      summary: '盘点最新AI开发工具与开源资源...',
      content: `开发者可借助这些工具高效构建AI应用。`,
      image: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80'
    }
  ]
};

const HotDetail: React.FC = () => {
  const { cat, idx } = useParams();
  // cat: tech/app/policy/tool
  // idx: 0,1,2...
  const list = hotList[cat as keyof typeof hotList] || [];
  const item = list[Number(idx)];

  if (!item) {
    return <Card style={{ margin: 32 }}><h2>未找到该内容</h2></Card>;
  }

  return (
    <div style={{ maxWidth: 900, margin: '32px auto', background: '#fff', borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
      <div style={{ padding: '32px 40px 24px 40px' }}>
        <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>{item.title}</h1>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16, gap: 16 }}>
          <Avatar style={{ background: '#13c2c2' }}>{item.author[0]}</Avatar>
          <span style={{ color: '#222', fontWeight: 500 }}>{item.author}</span>
          <span style={{ color: '#888' }}>{item.time}</span>
          {item.tags.map(tag => <Tag key={tag} color="cyan">{tag}</Tag>)}
        </div>
        <div style={{ color: '#666', fontSize: 16, marginBottom: 18 }}>{item.summary}</div>
        {item.image && <img src={item.image} alt={item.title} style={{ width: '100%', borderRadius: 8, marginBottom: 24 }} />}
        <div style={{ color: '#222', fontSize: 17, lineHeight: 2, whiteSpace: 'pre-line', marginBottom: 32 }}>{item.content}</div>

        {/* 文章结尾信息 */}
        <div style={{ fontSize: 14, color: '#888', borderBottom: '1px dashed #eee', paddingBottom: 16, marginBottom: 16 }}>
          本文由「{item.author}」原创出品，转载或内容合作请点击 <a href="#" style={{ color: '#1677ff' }}>转载说明</a>；违规转载必究。
        </div>

        {/* 寻求报道按钮 */}
        <Button type="primary" shape="round" style={{ marginBottom: 16 }}>
          寻求报道 {'>'}
        </Button>

        {/* 图片来源 */}
        {item.image && <div style={{ fontSize: 14, color: '#888', marginBottom: 24 }}>本文图片来自：企业授权</div>}

        {/* 点赞及互动区域 */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Space size="large">
            <Space direction="vertical" align="center">
              <Button type="text" shape="circle" icon={<LikeOutlined style={{ fontSize: 24 }} />} style={{ height: 'auto' }} />
              <span style={{ fontSize: 14, color: '#666' }}>4</span>
            </Space>
            {/* 其他互动图标 */}
            <Button type="text" shape="circle" icon={<StarOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<MessageOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<ShareAltOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<WarningOutlined style={{ fontSize: 20, color: '#888' }} />} />
          </Space>
        </div>

        {/* 分割线和评论区入口 */}
        <Divider />
        <h3 style={{ fontSize: 18, fontWeight: 600, color: '#222', marginTop: 24 }}>参与评论</h3>

      </div>
    </div>
  );
};

export default HotDetail; 